import { computed, ComputedRef, defineComponent } from 'vue';
import Modeler from 'bpmn-js/lib/Modeler';
import Selection from 'diagram-js/lib/features/selection/Selection';
import Modeling from 'bpmn-js/lib/features/modeling/Modeling.js';
import EventEmitter from '/@/utils/bpmn/EventEmitter';
// import LucideIcon from '/@/components/common/LucideIcon.vue'
import { useMessage } from '/@/hooks/web/useMessage';
import { Icon } from '/@/components/Icon';
import { useI18n } from '/@/hooks/web/useI18n';
import HlTooltip from './tooltip';

const Aligns = defineComponent({
  name: 'Aligns',
  setup() {
    const { t } = useI18n();
    const { createMessage } = useMessage();

    const buttons: ComputedRef<{ name: string; key: string; icon: string; rotate?: number }[]> =
      computed(() => {
        return [
          {
            name: t('routes.bpmn.alignLeft'),
            key: 'left',
            icon: 'align-horizontal-right',

            rotate: 2,
          },
          {
            name: t('routes.bpmn.alignCenter'),
            key: 'center',
            icon: 'align-horizontal-center',
            rotate: 2,
          },
          {
            name: t('routes.bpmn.alignRight'),
            key: 'right',
            icon: 'align-horizontal-left',
            rotate: 2,
          },
          { name: t('routes.bpmn.alignTop'), key: 'top', icon: 'align-vertical-bottom', rotate: 2 },
          {
            name: t('routes.bpmn.alignMiddle'),
            key: 'middle',
            icon: 'align-vertical-center',
            rotate: 2,
          },
          {
            name: t('routes.bpmn.alignBottom'),
            key: 'bottom',
            icon: 'align-vertical-top',
            rotate: 2,
          },
        ];
      });

    let modeling: Modeling | null = null;
    let selection: Selection | null = null;
    let align: any = null;

    EventEmitter.on('modeler-init', (modeler: Modeler) => {
      modeling = modeler.get('modeling');
      selection = modeler.get('selection');
      align = modeler.get('alignElements');
    });

    const alignElements = (tag: string) => {
      if (modeling && selection) {
        const SelectedElements = selection.get();
        if (!SelectedElements || SelectedElements.length <= 1) {
          return createMessage.warning('请按住 Shift 键选择多个元素对齐');
        }
        align.trigger(SelectedElements, tag);
      }
    };

    return () => (
      <div className="aligns hl-group">
        {buttons.value.map((item) => {
          return (
            <div className="hl-group-item" onClick={() => alignElements(item.key)}>
              <HlTooltip title={item.name}>
                <Icon icon={'mdi:' + item.icon} iconOpt={{ rotate: item.rotate, width: 18 }} />
              </HlTooltip>
            </div>
          );
        })}
      </div>
    );
  },
});

export default Aligns;
